<template>
  <div class="container marketing">
    <Icon></Icon>
    <div class="row">
      <div class="col-lg-4" v-for="item in propertyList" :key="item.index">
        <img
          class="img-circle"
          :src="item.image"
          alt="Generic placeholder image"
          width="200"
          height="200"
        />
        <h2>{{ item.title }}</h2>
        <p>
          {{ item.description }}
        </p>
        <p>
          <a
            class="btn btn-default"
            href="#"
            role="button"
            @click.prevent="$router.push(`/detail?id=${item.id}`)"
            >点击查看详情 &raquo;</a
          >
        </p>
      </div>
      <!-- <div class="col-lg-4">
        <img
          class="img-circle"
          src="https://img2.baidu.com/it/u=1914484325,3783910688&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"
          alt="Generic placeholder image"
          width="200"
          height="200"
        />
        <h2>高楼</h2>
        <p>
          高楼即高层建筑，按传统来说，一般9层以上，带电梯的楼宇即可以被称为高楼。但在现代社会，由于高层建筑数量越来越多，高度也越来越高，对高楼又增加了新的定义，一般18层以上被称为高层建筑，100米或30层以上可以被称为超高层建筑或摩天大楼。
        </p>
        <p>
          <a class="btn btn-default" href="#" role="button"
            >点击查看详情 &raquo;</a
          >
        </p>
      </div>
      <div class="col-lg-4">
        <img
          class="img-circle"
          src="https://img2.baidu.com/it/u=1914484325,3783910688&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"
          alt="Generic placeholder image"
          width="200"
          height="200"
        />
        <h2>高楼</h2>
        <p>
          高楼即高层建筑，按传统来说，一般9层以上，带电梯的楼宇即可以被称为高楼。但在现代社会，由于高层建筑数量越来越多，高度也越来越高，对高楼又增加了新的定义，一般18层以上被称为高层建筑，100米或30层以上可以被称为超高层建筑或摩天大楼。
        </p>
        <p>
          <a class="btn btn-default" href="#" role="button"
            >点击查看详情 &raquo;</a
          >
        </p>
      </div>
      <div class="col-lg-4">
        <img
          class="img-circle"
          src="https://img2.baidu.com/it/u=1914484325,3783910688&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"
          alt="Generic placeholder image"
          width="200"
          height="200"
        />
        <h2>高楼</h2>
        <p>
          高楼即高层建筑，按传统来说，一般9层以上，带电梯的楼宇即可以被称为高楼。但在现代社会，由于高层建筑数量越来越多，高度也越来越高，对高楼又增加了新的定义，一般18层以上被称为高层建筑，100米或30层以上可以被称为超高层建筑或摩天大楼。
        </p>
        <p>
          <a class="btn btn-default" href="#" role="button"
            >点击查看详情 &raquo;</a
          >
        </p>
      </div> -->
    </div>
  </div>
</template>

<script>
import { getPropertyList } from "@/api/property.js";
import Icon from "./components/index.vue";
export default {
  data() {
    return {
      pageConfig: {
        _limit: 3,
        _start: 0,
      },
      propertyList: [],
    };
  },
  async created() {
    const res = await getPropertyList({
      _limit: this.pageConfig._limit,
      _start: this.pageConfig._start,
    });
    this.propertyList = res.data;
  },
  components: {
    Icon,
  },
};
</script>

<style lang="less" scoped>
.container{
  min-height: 450px;
}
.marketing {
  margin-top: 40px;
  width: 60%;
  .col-lg-4 {
    margin-bottom: 20px;
    text-align: center;
    p {
      margin-right: 10px;
      margin-left: 10px;
    }
  }
  h2 {
    font-weight: 400;
  }
}
</style>>